<script setup lang="ts">
import {ref} from 'vue'

const flag = ref(false)


// vuez中动画的使用注意事项
// 1.使用Transition对要使用动画的元素或组件进行包裹()
// 2.v-if或v-show
// 3.vue中给动画内置了六个类名,前三个动画进入时的类,后三个动画离开时的类
// 4.多个transition使用不同动画，可以添加name属性，name属性的值替换v即可。
/*
---进入时
v-enter-from 进入前
v-enter-active 进入中
v-enter-to j进入后
---离开时(隐藏,移除)
v-leave-from 离开前
v-leave-active 离开中
v-leave-to 离开后
*/
</script>


<template>
<!--vue中的动画-->
<button @click="flag= !flag">切换,盒子隐藏与显示</button>
<Transition name="one">
    <div class="box" v-if="flag"></div>
</Transition>

<Transition name="two">
    <div class="box" v-if="flag"></div>
</Transition>
</template>


<style scoped>
.box {
    width: 300px;
    height: 300px;
    background-color: aquamarine;
}
/* .v-enter-from {
    opacity: 0;
}
.v-enter-active {
    transition: all 5s;
}
.v-enter-to {
    opacity: 1;
}

.v-leave-from {
    opacity: 1;
}
.v-leave-active {
    transition: all 5s;
}
.v-leave-to {
    opacity: 0;
} */

.one-enter-from {
    opacity: 0;
}
.one-enter-active {
    transition: all 5s;
}
.one-enter-to {
    opacity: 1;
}

.one-leave-from {
    opacity: 1;
}
.one-leave-active {
    transition: all 5s;
}
.one-leave-to {
    opacity: 0;
}




.two-enter-from {
    opacity: 0;
}
.two-enter-active {
    transition: all 5s;
}
.two-enter-to {
    opacity: 1;
    width: 500px;
    height: 500px;
    background-color: blueviolet;
}

.two-leave-from {
    opacity: 1;
    width: 500px;
    height: 500px;
    background-color: blueviolet;
}
.two-leave-active {
    transition: all 5s;
}
.two-leave-to {
    opacity: 0;
}
</style>